<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------

include "../config/config.php";
include "../auth.php";

// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>新建购物清单</title>
    <link rel="stylesheet" href="../resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<?php include "../globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<!-- div container start -->
<div class="container container-fluid mb-5">

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a></li>
                <li class="breadcrumb-item"><a class="text-decoration-none" href="index.php">购物清单</a></li>
                <li class="breadcrumb-item active">新建</li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <form id="myForm" action="createFormAction.php" method="post" class="mt-2">

        <fieldset class="mt-0">
            <div class="mt-0">
                <input type="text"
                       id="inputTitle"
                       name="title"
                       required
                       autofocus
                       placeholder="标题"
                       class="form-control">
            </div>
            <div class="mt-2">
                <textarea name="content"
                          id="inputContent"
                          cols="30"
                          rows="15"
                          placeholder="商品列表"
                          class="form-control"></textarea>
            </div>
        </fieldset>

        <fieldset class="mt-3">
            <button id="btnSubmit" type="button" class="btn btn-outline-primary">保存</button>
            <button id="btnClear" type="button" class="btn btn-outline-secondary">清空</button>
        </fieldset>

    </form>

</div>
<!-- div container end -->

<!-- ----------------------------------------------------------------------- -->

<!-- 消息弹窗 开始 -->
<div aria-live="polite" aria-atomic="true" class="position-relative">
    <div class="toast-container position-fixed top-0 start-50 translate-middle-x">

        <div id="toastOne" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div id="toastHeader" class="toast-header bg-info">
                <strong class="me-auto">提示</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body bg-white">
                <p id="msgContent">需要显示的信息。</p>
            </div>
        </div>

    </div>
</div>
<!-- 消息弹窗 结束 -->

<!-- ----------------------------------------------------------------------- -->

<script>
    // 处理 the 事件 of the 清空按钮
    $("#btnClear").on("click", function () {
        // $("#inputTitle").val("")
        $("#inputContent").val("")
        $("#inputContent").focus()
    })

    // 处理 the 事件 of the 提交按钮
    $("#btnSubmit").on("click", function() {

        var url = "createFormAction.php";

        $.post(url, $("#myForm").serialize())
            .done(function (data) {
                $("#msgContent").text(data)
                $("#toastHeader").attr("class", "toast-header bg-info")
                const toast = new bootstrap.Toast(toastOne, {"delay": 1000})
                toast.show()
            })
            .fail(function () {
                alert("保存失败！")
            })

    });
</script>

<!-- ----------------------------------------------------------------------- -->

<script>
    // 按下 ctrl + s 时保存。
    // 参考资料：https://stackoverflow.com/questions/93695/best-cross-browser-method-to-capture-ctrls-with-jquery
    $(window).bind('keydown', function(event) {
        if (event.ctrlKey || event.metaKey) {
            switch ((event.key).toLowerCase()) {
                case 's':
                    event.preventDefault();
                    $("#btnSubmit").click();
            }
        }
    });
</script>

<!-- ----------------------------------------------------------------------- -->

<script>

    var formEdited = false;

    // 监听用户是进行了输入操作
    $(".form-control").keydown(function () {
        formEdited = true;
    });

    // 页面刷新或关闭前弹窗警告
    $(window).on('beforeunload', function(){
        if (formEdited == true) {
            return "Are you sure you want to leave?";
        }
    });

    // 点击按钮提交表单刷新页面时不弹窗警告
    $('#btnSubmit').on("click", function () {
        $(window).off('beforeunload');
    });

</script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>
